import React from 'react';
import {View, Button} from 'react-native'
import {StackNavigator} from 'react-navigation'
import MyTab from './MyTab'
import Detail1 from './Detail1'
import Detail2 from './Detail2'
import StackViewStyleInterpolator from 'react-navigation/src/views/StackView/StackViewStyleInterpolator';

export default MyApp = StackNavigator({
    MyTab: {
        screen: MyTab,
        navigationOptions: ({navigation}) => {
            return {header: null}
        }
    },
    Detail1: {
        screen: Detail1,
        navigationOptions: ({navigation}) => {
            return {header: null}
        }
    },
    Detail2: {
        screen: Detail2,
        navigationOptions: ({navigation}) => {
            return {header: null}
        }
    },
}, {
    transitionConfig: () => ({
        screenInterpolator: StackViewStyleInterpolator.forHorizontal,
        transitionSpec:{
                duration: 250,
            }
    })
});


const StackOptions = ({navigation}) => {
    console.log(navigation);
    let {state, goBack} = navigation;

    // 用来判断是否隐藏或显示header
    const visible = state.params.isVisible;
    let header;
    if (visible === true) {
        header = null;
    }
    const headerStyle = {backgroundColor: '#4ECBFC'};
    const headerTitle = state.params.title;
    const headerTitleStyle = {fontSize: 20, color: 'white', fontWeight: '500'};
    const headerBackTitle = false;
    const headerLeft = (
        <Button
            isCustom={true}
            customView={
                <Icon
                    name='ios-arrow-back'
                    size={30}
                    color='white'
                    style={{marginLeft: 13}}
                />
            }
            onPress={() => {
                goBack()
            }}
        />
    );
    return {headerStyle, headerTitle, headerTitleStyle, headerBackTitle, headerLeft, header}
};